<template>
    <div class="index">
        <cube-scroll ref="scroll" :options="scroll_options" :style="{height:page_height+'px'}" @pulling-up="upGetList">
            <!--S列表-->
            <div id="ul" v-if="list.length > 0">
<!--                <div class="li">-->
<!--                    <img class="cover" src="https://www.baidu.com/img/dong_a16028f60eed614e4fa191786f32f417.gif" @load="$refs.scroll.refresh()"/>-->
<!--                    <p class="name">名称这是活动名称这是霍东阁名称</p>-->
<!--                    <p class="address">活动地址:活动地址活动地址活动地</p>-->
<!--                    <p class="time">活动时间:2019-10-29 12:00至2019-10-29 12:00</p>-->
<!--                    <p class="status">未开始</p>-->
<!--                </div>-->
                <div class="li" v-for="item in list" v-bind:key="item.id">
                  <router-link :to="{name:'activity',params:{activity_id:item.id,share_uid:0}}">
                      <img class="cover" :src="item.cover" @load="$refs.scroll.refresh()"/>
                      <p class="name">{{item.name}}</p>
                      <p class="address">活动地址:{{item.address}}</p>
                      <p class="time">活动时间:{{item.start}}~{{item.end}}</p>
                      <p class="status">
                          <span v-if="item.status == 1">未开始</span>
                          <span v-if="item.status == 2">进行中</span>
                          <span v-if="item.status == 3">已结束</span>
                      </p>
                  </router-link>
                </div>
            </div>
            <empty v-else>暂无活动</empty>
            <!--E列表-->
        </cube-scroll>
    </div>
</template>

<script>
    import store from "../../store";
    import empty from "../../components/empty/Empty.vue";
    export default {
        name:"index",
        data(){
            return {
                page_height:store.state.height,
                scroll_options:{   //滚动参数
                    scrollbar:true,
                    pullUpLoad: {
                        txt: {
                            more: "上拉加载更多",
                            noMore: "----我也是有底线的----"
                        }
                    }
                },
                list:[],  //列表
                limit:[0,5]   //limit请求下标 请求数量
            };
        },
        components:{
          empty
        },
        beforeRouteEnter(to,from,next){
            next(vm=>{
                vm.getList();
                vm.wxReady()
                    .then(()=>{
                        vm.wxShare();
                    })
                    .catch();
            });
        },
        created(){
          this.$parent.tabs_selected = "index";
        },
        mounted(){
            this.page_height = document.documentElement.clientHeight - this.$parent.$refs.footer.getBoundingClientRect().height;
        },
        methods:{
            //获取列表
            getList(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"activityA",
                    doing:"getList",
                    limit:this.limit
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.list.push(...res.data.data);
                            this.$refs.scroll.forceUpdate(true,true);
                            this.limit[0] += this.limit[1];
                        }else{
                            this.$refs.scroll.forceUpdate(false,false);
                        }
                        this.$nextTick(()=>{
                            if(this.$refs.scroll.$el.querySelector(".cube-scroll-list-wrapper").getBoundingClientRect().height-1 <= Math.ceil(this.page_height)){
                                this.scroll_options.pullUpLoad = false;
                            }
                            this.$refs.scroll.refresh();
                        });
                    })
                    .catch();
            },
            //上拉加载更多
            upGetList(){
                this.getList();
            },
            //微信ready
            wxReady(){
                if(!this.$sysinfo.develop){
                    return new Promise((success)=>{
                        this.$wx.ready(()=>{
                            success();
                        });
                    });
                }else{
                    return new Promise((success)=>{
                        success();
                    });
                }
            },
            //微信分享
            wxShare(){
                if(!this.$sysinfo.develop){
                    var shareData = {
                        title:"活动列表"
                    };
                    this.$wx.onMenuShareAppMessage(shareData);
                    this.$wx.onMenuShareTimeline(shareData);
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    .index{
        font-size:16px;
    }
    #ul{
        padding:0 10px;
        .li{
            position: relative;
            padding: 10px 0 10px 0;
            box-sizing: border-box;
            font-size:16px;
            overflow: hidden;
            border-bottom: 1px solid #eee;
        }
        .li:nth-last-child(1){
            border-bottom: none;
        }
        .li img.cover{
            display: block;
            width:100%;
            height:160px;
            object-fit: cover;
        }
        .li .name{
            padding:3px 0;
            line-height: 105%;
            box-sizing: border-box;
        }
        .li .address{
            padding:3px 0;
            font-size:14px;
        }
        .li .time{
            padding:3px 0;
            font-size:14px;
        }
        .li .status{
            position: absolute;
            top:20px;
            left:0;
            display: inline-block;
            padding:3px 10px;
            color:#fff;
            background:rgba(252,145,83,0.8);
            border-radius: 0 10px 10px 0;
        }
    }
</style>

